<!--产品展示-->
<meta charset="utf-8"/>
<div class="row">
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-12">
        <div style="height:36px;margin-top:2px">
          <table class="no-border" style="display:inline">
            <tr>
              <td permission='product_show_btn_listData' style="padding-right:6px;display:none">
                标题|名称
              </td>
              <td permission='product_show_btn_listData' style="display:none">
                <input type="text" id="key_title" class="form-control search-query" placeholder="输入标题（产品名称）" style="width:200px"/>
              </td>
              <td permission='product_show_btn_listData' style="display:none">
                <div class="input-group">
                  <span class="input-group-btn"><button type="button" class="btn btn-inverse btn-white" id="btnSearch" title="搜索查询"><span class="ace-icon fa fa-search bigger-110"></span>搜索</button></span>
                </div>
              </td>
              <td permission='product_show_btn_listData' style="display:none" class="hidden-480">
                <div class="input-group">
                  <span class="input-group-btn"><button type="button" class="btn btn-inverse btn-white" id="btnReset" title="重置清空搜索关键字"><span class="ace-icon fa fa-undo bigger-110"></span>重置</button></span>
                </div>
              </td>
              <td permission='product_show_btn_add' style="display:none">
                <div class="input-group">
                  <span class="input-group-btn"><button type="button" class="btn btn-inverse btn-white" id="btnAdd" title="新增|添加"><span class="ace-icon fa fa-plus bigger-110"></span>添加</button></span>
                </div>
              </td>
              <td permission='product_show_btn_delByKeys' style="display:none" class="hidden-480">
                <div class="input-group">
                  <span class="input-group-btn"><button type="button" class="btn btn-inverse btn-white" id="btnDel" title="删除|批量删除"><span class="ace-icon fa fa-trash red2 bigger-110"></span>删除</button></span>
                </div>
              </td>
            </tr>
          </table>
          <div class="hidden-480 pull-right tableTools-container" permission='product_show_btn_listData' style="display:none;margin-bottom:2px"></div>
        </div>
        <table id="tableListProductShow" class="table table-striped table-bordered table-hover">
          <tbody>
          <tr>
            <td style="text-align:center;height:37px">正在加载……</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<div id="div_product_show_edit" style="display:none;padding-top:2px">
  <form class="form-horizontal" id="form_product_show_edit" role="form">
    <label class="col-sm-2 control-label no-padding-right"><div class="hr-4">标题|名称<span style="color:#f00;display:inline-block;vertical-align:middle;width:auto;height:14px;line-height:18px">*</span></div></label>
    <div class="col-sm-9">
      <div class="hr-4"></div>
      <input type="text" id="title" placeholder="标题（产品名称）" class="form-control" maxlength="128" title="标题（产品名称）"/>
    </div>
    <label class="col-sm-2 control-label no-padding-right"><div class="hr-4" id="added_required_cover">产品图片<span style="color:#f00;display:inline-block;vertical-align:middle;width:auto;height:14px;line-height:18px">*</span></div></label>
    <div class="col-sm-9" id="cover_parent" >
      <div class="hr-4"></div>
      <input type="file" id="cover" placeholder="产品图片" class="form-control" title="请选择产品图片"/>
    </div>
    <label class="col-sm-2 control-label no-padding-right"><div class="hr-4">产品详情<span style="color:#f00;display:inline-block;vertical-align:middle;width:auto;height:14px;line-height:18px">*</span></div></label>
    <div class="col-sm-9">
      <div class="hr-4"></div>
      <textarea type="text" id="details" placeholder="产品展示详情" class="form-control limited" maxlength="921600000" style="width:100%;height:550px;" title="请输入产品展示详情"></textarea>
    </div>
    <label class="col-sm-2 control-label no-padding-right"><div class="hr-4">排序号<span style="display:inline-block;width:7px"></span></div></label>
    <div class="col-sm-9" style="margin-bottom:6px">
      <div class="hr-4"></div>
      <input type="text" id="sort" placeholder="排序号" class="form-control" maxlength="10" oninput="value=value.replace(/[^\d]/g,'')" title="排序号"/>
    </div>
  </form>
</div>
<div id="divKeyColumns" style="display:none;padding:1px 0px;"></div>
<div style="display:none;">
  <input type="hidden" id="product_show_btn_listData"/>
  <input type="hidden" id="product_show_btn_add"/>
  <input type="hidden" id="product_show_row_edit"/>
  <input type="hidden" id="product_show_row_queryById"/>
  <input type="hidden" id="product_show_row_delById"/>
  <input type="hidden" id="product_show_btn_delByKeys"/>
</div>
<script type="text/javascript">
  ;(function($){
    var tableDom = '#tableListProductShow';
    var urlRoute = '/productShow/';/*请求controller层的url*/
    var getList = urlRoute + 'listData';/*获取数据列表*/
    var urlAdd = urlRoute + 'add';/*添加*/
    var urlEdit = urlRoute + 'edit';/*编辑*/
    var urlQueryById = urlRoute + 'queryById';/*根据id查询对应的数据*/
    var urlDelById = urlRoute + 'delById';/*根据id删除对应的数据*/
    var urlDelByKeys = urlRoute + 'delByKeys';/*批量删除*/
    var stateOriginal = {};//仅供参考，更新优化-选项1,可参考项目law-frontend的页面serviceAd.html和后端law-backend的ServiceADService.java;记录编辑的值,仅在编辑时可用
    var thisTable = null;
    thisPage = {
      init : function(){
        this.initTable();
        this.createDropdown();
        this.initDom();
        this.addEvent();
      },
      initDom : function(){
        winFn.initFileShoose('#cover',['jpg','JPG','jpeg','JPEG','png','PNG','svg','SVG'],'请选择产品图片');
      },
      createDropdown : function(){
      },
      addEvent : function(){
        $(tableDom +' tbody').on('dblclick','td:not(:first-child,:last-child)',function(){//除去每行的第一个和最后一个单元格均可双击事件
          if(verifyFn.inputRequired('#product_show_row_edit')){
            return;
          }
          thisPage.trDblclick(thisTable.row($(this).parent()).data());
        });
        $('#btnAdd').on('click', function(){
          thisPage.edit();
        });
        //搜索按钮
        $('#btnSearch').on('click', function(){
          thisPage.search(true);
        });
        //重置按钮
        $('#btnReset').on('click', function(){
          $('#key_title').val('');
        });
        //按钮组-自定义显示列
        $('#iconColumn').parent().parent().on('click', function(){
          pageDataTable.columnCustom(thisTable, tableDom,'#divKeyColumns');
        });
        //按钮组-搜索
        $('#iconRefresh').parent().parent().on('click', function(){
          thisPage.search(true);
        });
        $('#btnDel').on('click', function(){
          thisPage.delKeys();
        });
      },
      /**获取已选中的主键集合,用法:var kids = thisPage.getKeyIds();if(kids == null || kids == ''){layerFn.alert('请选择要操作的数据', AppKey.code.code199);return;}*/
      getKeyIds : function(){
        var arrays = thisTable.rows({selected : true}).data();//获取已勾选的数据行
        if(arrays.length == 0){
          return null;
        }
        var kids = '';
        for(var i = 0; i < arrays.length; i++){
          var value = arrays[i].kid;
          if(value != ''){
            if(kids.length > 0) kids += ",";
            kids += value;
          }
        }
        return kids;
      },
      /*批量删除*/
      delKeys : function(){
        if(verifyFn.inputCheck('#product_show_btn_delByKeys','没有删除操作权限')) return;
        var kids = thisPage.getKeyIds();
        if(kids == null || kids == ''){
          layerFn.alert('请选择要删除的数据!', AppKey.code.code199);
          return;
        }
        layerFn.confirm('将要删除[' + kids.split(',').length + ']条数据且是无法恢复,确定要继续吗?', function(){
          layerFn.delBatchHint(urlDelByKeys, kids, function(data){//后端可直接使用 final Long[] kids 接收参数的
            $(tableDom+'_wrapper table thead tr th:eq(0) label input[type="checkbox"]').prop("checked",false);
            thisPage.complete(data, null, true);
          });
        });
      },
      initTable : function(){
        var optsVisible = getOptsVisible('product_show_row');//确定是否要显示操作选项,若是多个按钮权限时以逗号,隔开
        var optsBatchBtn = getOptsVisible('product_show_btn_delByKeys');//是否有批量操作的权限,若是多个按钮权限时以逗号,隔开
        var aoColumns = [];
        if(optsBatchBtn){
          aoColumns.push({
            sortable : false,
            data : "kid",
            width : "38px",
            class : "center",
            visible : true,
            title : '<label title="全选|不选"><input type="checkbox" class="ace" /><span class="lbl"></span></label>'
          });
        }
        aoColumns.push({
          data : "title",
          sortable : false,
          title : "标题|名称"
        });
        aoColumns.push({
          data : "pv",
          sortable : true,
          title : "浏览量",
          render : function(value,type,row,meta){
            return value ? value : '0';
          }
        });
        aoColumns.push({
          data : "sort",
          sortable : true,
          title : "排序号",
          render : function(value,type,row,meta){
            return value ? value : '';
          }
        });
        aoColumns.push({
          data : "_kid_more_",
          sortable : false,
          title : "<label style='color:#000' title='查看更多选项'>更多选项</label>",
          width : "95px",
          class : 'text-center',
          render : function(value,type,row,meta){
            var html = "<div style='margin:-10px -2px -10px -2px'><span class='input-group-btn'>";
            html += "<button data-toggle='dropdown' class='btn btn-primary btn-white dropdown-toggle' style='margin-left:0px;border:none' title='更多选项'>";
            html += "<span style='margin-left:-4px;margin-right:4px;padding-right:-20px'>更多选项</span>";
            html += "<i class='ace-icon fa fa-angle-down'></i>";
            html += "</button>";
            html += "<ul class='dropdown-menu dropdown-info dropdown-menu-right' style='margin-left:-1px;width:95px;min-width:95px;margin-right:-2px'>";
            html += "<li style='display:none' permission='product_show_row_queryById' title='产品详情'><a href='javascript:thisPage.rowColumnDetails("+meta.row+",\"details\",1);'>产品详情</a></li>";
            html += "<li style='display:none' permission='product_show_row_queryById' title='产品图片'><a href='javascript:thisPage.rowColumnDetails("+meta.row+",\"cover\",4);'>产品图片</a></li>";
            html += "</ul>";
            html += "</span>";
            html += "</div>";
            return html;
          }
        });
        if(optsVisible){
          aoColumns.push({
            data : "_kid_",
            width : "75px",
            class : 'text-center',
            title : "<label style='color:#000' title='单行操作'>操作选项</label>",/*此处的字‘操作选项’请勿修改,此处的文字还有其它用途*/
            sortable : false
          });
        }
        var columnDefs = [];
        if(optsBatchBtn){
          columnDefs.push({
            targets : 0,
            render : function(value,type,row,meta){
              return '<label title="选择|取消"><input type="checkbox" name="kid" value="'+ value +'" style="cursor:pointer;text-decoration:none;outline:none;"/><span class="lbl"></span></label>';
            }
          });
        }
        if(optsVisible){//是否来显示某列
          columnDefs.push({
            targets : -1,
            render : function(value,type,row,meta){
              return "<a title='编辑|修改' href='javascript:thisPage.rowEdit("+ meta.row +");' style='outline:none;text-decoration:none;color:#3b8cff;display:none' permission='product_show_row_edit'>编辑</a><a title='删除当前行数据' class='hidden-480' href='javascript:thisPage.rowDel("+ meta.row +");' style='outline:none;text-decoration:none;color:#f00;margin-left:6px;display:none' permission='product_show_row_delById'>删除</a>";
            }
          });
        }
        columnDefs.push({
          targets : optsBatchBtn ? [1,2,3,4] : [0,1,2,3,4],
          render : function(value,type,row,meta){
            return pageDataTable.formatColumn(value);
          }
        });
        columnDefs.push({
          visible : false,//列的隐藏显示
          targets : []//指定列索引
        });
        thisTable = pageDataTable.initDataTable({
          tableDom : tableDom,
          sAjaxSource : getList,
          fnServerParams : function(params){
            params.push(
              {"name":"title","value":winFn.getDomValue('#key_title')}
            );
          },
          aoColumns : aoColumns,
          columnDefs : columnDefs,
          complete : function(settings,data){},//仅执行一次
          footer : function(data,start,end,thLength){},//每次都会执行
          selected : function(selected){
            if(selected){
              //$('#btnDel').removeAttr('disabled');//默认在该button添加属性disabled="disabled"
            }else{
              //$('#btnDel').attr('disabled','disabled');
            }
          }
        });
        pageDataTable.buttons(thisTable);
        pageDataTable.action(thisTable);
        pageDataTable.select(thisTable, tableDom);
        pageDataTable.tooltip();
        $('.dataTables_scroll .dataTables_scrollBody').removeAttr('style');//解决dataTable表头下拉框被tbody遮挡
      },
      //双击事件
      trDblclick : function(data){
        if(data){
          thisPage.edit(data.kid);
        }
      },
      //是否是搜索,是则搜索时则返回到第一页
      search : function(search){
        if(verifyFn.inputCheck('#product_show_btn_listData','没有操作权限')) return;
        $(tableDom + '_wrapper table input[type=checkbox]').prop('checked',false);//此行不需要,因为搜索时表格已重新渲染
        //thisTable.draw();保留
        if(search){
          $(tableDom).DataTable().ajax.reload();//编辑时成功会重载所有接口数据，返回到第一页
        }else{
          $(tableDom).DataTable().ajax.reload(null,false);//编辑时成功重新加载表数据(分页页码保留);
        }
      },
      //需要时或为空时才去请求,减轻服务器查询,仅适用于不需要分页的数据,用法:thisPage.getProduct_shows(function(list){});参考项目 wine-frontend/src/main/resources/static/activity.html的getGoods方法
      getProduct_shows : function(callback){
        if(listProduct_show == null){//定义全局的 var listProduct_show = null;//新增或编辑时所需的数据
          layerFn.queryGetHintResult(urlQueryProduct_show,{},function(data){
            if(AppKey.code.code200 == data.code){
              listProduct_show = data.data;
              callback(listProduct_show);
            }else{
              callback();//注意判断 if(listProduct_show != null){}为空,可参考 liquor-console/src/main/resources/static/goods.html
            }
          });
        }else{
          callback(listProduct_show);
        }
      },
      resetForm : function(){
        winFn.clearFormData('#form_product_show_edit');
        /*
        $('#title').val('');
        //winFn.removeInputFile('#cover_parent');//新的置空方法已处理含文件上传的功能
        $('#details').val('');
        */
      },
      edit : function(kid){
        var title = '添加';
        if(kid != null && kid.length > 0){
          if(verifyFn.inputCheck('#product_show_row_queryById','没有操作权限')) return;
          title = '编辑';
          layerFn.queryByIdHint(urlQueryById, kid, function(data){
            thisPage.openDialog(title, kid, data);
            //thisPage.editJson(data.data,['ad_img']);//仅在赋值后再执行此代码,更新优化-选项2
          });
        }else{
          thisPage.openDialog(title);
        }
      },
      //移除不需要对比的key(此方法可有可无)
      editJson : function(data,keys){
        if(keys){
          for(var h = 0; h < keys.length; h++){
            delete data[keys[h]];//删除key元素
          }
        }
        stateOriginal = data;
      },
      //对比是否已修改了值,仅需判断必填的字段，文件上传的字段单独处理
      filterValue : function(params){
        if(stateOriginal != null){
          var ignoreKeys = '';
          var requiredKeys = '';
          for(var so in stateOriginal){
            if(params[so] == stateOriginal[so]){
              delete params[so];
              if(ignoreKeys != ''){
                ignoreKeys += ','+so;
              }else{
                ignoreKeys += so;
              }
            }else{
              if(requiredKeys != ''){
                requiredKeys += ','+so;
              }else{
                requiredKeys += so;
              }
            }
          }
          if(ignoreKeys != ''){
            params['ignoreKeys'] = ignoreKeys;//记录后端忽略验证的key以,隔开的字符串,注意数据库字段是否允许为空,可参考项目law-backend的joins.html;law-backend的JoinsService的方法edit();
          }
          if(requiredKeys != ''){
            params['requiredKeys'] = requiredKeys;//记录后端必填验证的key以,隔开的字符串
          }
        }
      },
      openDialog : function(title, kid, map){
        var url = urlAdd;
        if(kid != null && kid.length > 0){
          url = urlEdit;
          if(verifyFn.inputNull('#product_show_row_edit','没有编辑权限')) return;
        }else{
          if(verifyFn.inputNull('#product_show_btn_add','没有添加权限')) return;
        }
        /*if(kid != null && kid.length > 0){//编辑时必填或编辑时文件域的不必填
          $('#added_required_cover').html('封面图<span style="display:inline-block;width:7px"></span>');
        }else{
          $('#added_required_cover').html('封面图<span style="color:#f00;display:inline-block;vertical-align:middle;width:auto;height:14px;line-height:18px">*</span>');
        }*/
        layerFn.winKindEditor(title,'#div_product_show_edit',['#details'],(map == null ? null : map.data), ['966px','550px'], function(layerIndex, layero){
          if(verifyFn.inputEmpty('#title')) return;
          if(kid == null || kid.length <= 0){
            if(verifyFn.inputNull('#cover','请选择产品图片文件')) return;
          }
          if(verifyFn.inputNull('#details','产品展示详情不能为空')) return;
          var params = {
            title : winFn.getDomValue('#title',true),
            sort : winFn.getDomValue('#sort',true),
            details : winFn.getDomValue('#details'),
            kid : kid
          };
          /*thisPage.filterValue(params);//检查是否已修改了数据,更新优化-选项3,如果没有上传功能则可以验证未修改任何值时则不提交
          var validTotal = 0;
          for(var ck in params){
            if(params[ck] != undefined){
              validTotal++;
            }
          }*/
          /*
          if(validTotal == 0){//todo 此处需要弄含文件上传做业务处理,注意单个和多个文件上传的区别
            var file = document.getElementById("xxxxx").files[0];//举个例子,可参考项目law-frontend的页面serviceAd.html和后端law-backend的ServiceADService.java
            if(!file){
              layerFn.alert('尚未修改任何数据', AppKey.code.code199);
              return;
            }
          }*/
          var formData = new FormData();
          for(var key in params){
            formData.append(key,params[key]);
          }
          var file_cover = document.getElementById("cover").files[0];
          if(file_cover){
            var mb = file_cover.size / (1024 * 1024);//得到的MB,做文件大小限制
            if(mb > 3){
              layerFn.alert('封面图已超过３ＭＢ',AppKey.code.code199);
              return;
            }
            formData.append("cover",file_cover);
          }else{
            formData.append("cover",null);
          }
          layerFn.formSubmit(url,formData,function(data){
            thisPage.complete(data,layerIndex,true);
          });
        });
        thisPage.resetForm();
        if(map != null){
          $.each(map.data,function(k,v){
            try{
              if(k == 'temp_cover'){//保留,占位符,若使用到则删除前缀temp_即可
                //var jsonCover = eval('(' + k + ')');文件上传字段类型为json类型
                //$('#cover').attr('rel',v);//a标签,保留
                return true;
              }
              /*if(k == '需要处理特殊字段field,如复选框或单选框'){
                $('#label_'+goods_id).addClass("hRadio_Checked").prev()[0].checked = true;//赋值,选中
                $('#label_'+goodsId).addClass("checked").prev()[0].checked = true;//赋值,选中
                return true;//跳出本次循环;false跳出循环;日期:$('#' + k).val(winFn.formatDate(v,true));
              }*/
              $('#' + k).val(v);//若是有问题则把这个放在最前面
            }catch(e){}
          });
        }
      },
      rowEdit : function(rowIndex){
        var row = thisTable.row(rowIndex).data();
        thisPage.edit(row.kid);
      },
      rowDel : function(rowIndex){
        if(verifyFn.inputCheck('#product_show_row_delById','没有删除操作权限')) return;
        var row = thisTable.row(rowIndex).data();
        layerFn.confirm('删除后无法恢复,确定要删除吗?', function(){
          layerFn.delByIdHint(urlDelById, row.kid,function(data){
            thisPage.complete(data,null,true);
          });
        });
      },
      //column指定列名,type:1是普通的文本;2json对象里的value[字段已做转换 JSON_UNQUOTE(JSON_EXTRACT(icon,'$.urlFile')) as icon];3是json对象里含json对象;4是json对象[字段未做转换];5是打印
      rowColumnDetails : function(rowIndex,column,type){
        var row = thisTable.row(rowIndex).data();
        var columnValue = row[column];
        if(columnValue != undefined){
          switch (type){
            case 1:
              layerFn.viewValue(columnValue || '暂无数据','430px');
              break;
            case 2:
              window.open(webFiles+columnValue,'_blank').location;
              break;
            case 3:
              winFn.showFiles('#div_show_html_product_show',columnValue,column,'originalName');//json里含json,单个文件域含多个文件
              break;
            case 4:
              var objs = eval('('+columnValue+')');
              if(objs != undefined && objs.urlFile != undefined){
                window.open(webFiles+objs.urlFile,'_blank').location;
              }else{
                layerFn.alert('暂无数据',AppKey.code.code199);
              }
              break;
            case 5:
              var obj = eval('('+columnValue+')');
              if(obj != undefined && obj.urlFile != undefined){
                sessionStorage.setItem('file_url',webFiles+obj.urlFile);
                window.open('print.html','_blank').location;
              }else{
                layerFn.alert('暂无数据',AppKey.code.code199);
              }
              break;
            default:
              layerFn.alert('参数有误',AppKey.code.code199);
              break;
          }
        }else{
          layerFn.alert('暂无数据',AppKey.code.code199);
        }
      },
      //查看隐藏部分是全部内容,用法 render : function(value,type,row,meta){return thisPage.rowColumnView(value);}
      rowColumnView : function(value){
        if(value == null || value == undefined || value == '') return '';
        value = typeof value === 'string' ? value.replace(/</g, '&lt;').replace(/"/g, '&quot;') : value;//如果提示SyntaxError: expected expression, got '>'错误则注释掉即可
        var len = value.length;
        if(len > 30){
          return "<a href='javascript:layerFn.viewValue(\""+value+"\",\"430px\");' title='点击查看详情' style='outline:none;text-decoration:none;'>"+value.substring(0,30)+"…</a>";
        }else{
          return value;
        }
      },
      complete : function(data,index,search){
        try{
          if(index){
            layerFn.closeIndex(index);
          }
          if(search){
            thisPage.search();
          }
          if(data){
            layerFn.handleResult(data.msg,data.code);
          }
        }catch(e){}
      }
    };
    thisPage.init();
    $('script').remove();
  })(jQuery);
</script>